Slack で UI を構築するためのフレームワーク「Block Kit」の基本を確認してみた

#Slack API

#Slack

若槻龍太

2023.05.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 Delivery部の若槻です。

Slack を利用していると、次のようなボタンが付いたインタラクティブな UI を目にすることがあると思います。（画像は投票アプリの Polly の投稿）

Slack では、このような UI を Block Kit というフレームワークを利用することで簡単に構築することができます。

今回は、この Block Kit の基本的な仕様や使い方について確認してみました。

※本記事では Block Kit の UI のみを扱います。UI の操作により実際にインタラクティブなアクションを実現する方法については扱いません。

Block Kit とは

Block Kit は、Slack の様々な場所で利用できる、インタラクティブな UI を構築するためのフレームワークです。

Slack では Slack App を実装することにより様々な機能をアプリケーションとして追加することができますが、この Slack App を実装する際には、アプリの要件に応じて Message、Modal および App Home などのサーフェスを構築することになります。

投稿（Message）
モーダル（Modal）
アプリホーム（App Home）

これらサーフェスの構築に共通して利用できるフレームワークが Block Kit です。

Block Kit ではブロックを組み合わせて UI を構築する

Block Kit では、その名の通りブロックを組み合わせることにより UI を構築します。

Building with Block Kit | Slack

各ブロックは次のような JSON オブジェクトとして表されます。

{
  "type": "section",
  "text": {
    "type": "mrkdwn",
    "text": "New Paid Time Off request from <example.com|Fred Enriquez>\n\n<https://example.com|View request>"
  }
}

上記のブロックは次のような UI として表示されます。

ブロックのタイプは9つの種類があり type フィールドで指定します。（各種類の詳細はこちらをご覧ください。）

また下記のように複数のブロックを積み重ねて、より複雑な UI を表現することも可能です。

[
	{
		"type": "header",
		"text": {
			"type": "plain_text",
			"text": "New request"
		}
	},
	{
		"type": "section",
		"fields": [
			{
				"type": "mrkdwn",
				"text": "*Type:*\nPaid Time Off"
			},
			{
				"type": "mrkdwn",
				"text": "*Created by:*\n<example.com|Fred Enriquez>"
			}
		]
	},
	{
		"type": "section",
		"fields": [
			{
				"type": "mrkdwn",
				"text": "*When:*\nAug 10 - Aug 13"
			}
		]
	},
	{
		"type": "section",
		"text": {
			"type": "mrkdwn",
			"text": "<https://example.com|View request>"
		}
	}
]

上記のブロックは次のような UI として表示されます。

Block Kit では様々なブロック要素が用意されている

Block Kit では、ユーザーが UI 上でインタラクティブな操作を行うことができる様々なブロック要素（Block elements）が用意されています。

Reference: Block elements | Slack

ブロック要素は、JSON の elements フィールドに配列として指定することで利用できます。

{
	"blocks": [
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "This is a section block with a button."
			},
			"accessory": {
				"type": "button",
				"text": {
					"type": "plain_text",
					"text": "Click Me"
				},
				"value": "click_me_123",
				"action_id": "button"
			}
		},
		{
			"type": "actions",
			"block_id": "actionblock789",
			"elements": [
				{
					"type": "button",
					"text": {
						"type": "plain_text",
						"text": "Primary Button"
					},
					"style": "primary",
					"value": "click_me_456"
				},
				{
					"type": "button",
					"text": {
						"type": "plain_text",
						"text": "Link Button"
					},
					"url": "https://api.slack.com/block-kit"
				}
			]
		}
	]
}

ブロック要素は下記が利用可能です。それぞれのフィールド仕様につていはこちらをご覧ください。